<template>
	<w-layout showNavbar navTitle="登录" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent">
		<template #default>
			<view class="container">
				<up-code 
					:seconds="seconds" 
					ref="uCodeRef"
					@change="codeChange"
				></up-code>
				<view class="public-box-1 px-50 py-50">
					<view class="fc-ac mt-50">
						<image style="width: 160rpx;height: 160rpx;" src="/static/logo.png" mode=""></image>
					</view>
					
					<view class="public-box-2">
						
					</view>
					<view class="public-input-1 px-30 py-20 mt-90 fr-ac-jsb" style="color: #fff;">
						<input v-model="form.mobile" maxlength="11" class="fs-26 flex-1" type="text" placeholder="请输入手机号码" />
						<view @tap="getCode" class="ml-20 op-50">
							{{tips}}
						</view>
					</view>
					<view class="public-input-1 px-30 py-20 mt-40 fr-ac-jsb" style="color: #fff;">
						<input v-model="form.code" maxlength="6" class="fs-26 flex-1" type="text" placeholder="请输入验证码" />
					</view>
					
					<view @click="is_agree=!is_agree" class="fr-ac mt-50">
						<up-icon v-if="is_agree" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
							:color="publicStyles['--color']"></up-icon>
						<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
							:color="publicStyles['--color']"></up-icon>
						<view class="ml-10 fs-24">
							<text class="">我已阅读并同意</text>
							<text @click="$u.route(`/pages/parse/parse?type=4&title=用户协议`)" class="color">《用户协议》</text>
							<text class="">和</text>
							<text @click="$u.route(`/pages/parse/parse?type=5&title=隐私政策`)" class="color">《隐私政策》</text>
						</view>
					</view>
					
					<view @click="goLogin" :class="isFilling?'public-btn-2':'public-btn-1'" class="transition px-30 py-25  t-c mt-100 mb-60">
						<view :class="isFilling?'text-color-b':''">
							立即登录
						</view>
					</view>
				</view>
				
				<!-- <view class="mt-100 px-30">
					<up-button v-if="is_agree" @click="wxLogin" text="微信授权登录" class="login-btn"></up-button>
					<up-button v-if="!is_agree" @click="$u.toast('请阅读并同意《用户协议》《隐私政策》')" text="微信授权登录" class="login-btn"></up-button>
				</view> -->
				
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		mobile_login,
		send_sms,
		get_user
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {

	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	const is_agree = ref(false)
	// 使用 reactive 创建响应式状态
	const form = reactive({
		mobile: '',
		code: '',
	});
	
	//验证码相关
	const tips = ref('');
	const seconds = ref(60);
	const uCodeRef = ref(null);
	const codeChange = (text) => {
		tips.value = text;
		console.log(text)
	};
	const getCode = async () => {
		if (uCodeRef.value.canGetCode) {
			if (uni.$u.test.mobile(form.mobile)) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码',
				});
				const res = await send_sms({
					mobile: form.mobile,
				})
				uni.hideLoading();
				// 这里此提示会被start()方法中的提示覆盖
				uni.$u.toast('验证码已发送');
				// 通知验证码组件内部开始倒计时
				uCodeRef.value.start();
			} else {
				uni.$u.toast('请先输入正确手机号');
			}
	
		} else {
			uni.$u.toast('倒计时结束后再发送');
		}
	};
	
	
	const isFilling = computed(()=>{
		return form.mobile && form.code && is_agree.value
	})
	
	async function goLogin(){
		if(!uni.$u.test.mobile(form.mobile)){
			return uni.$u.toast('请输入正确手机号')
		}
		if(!form.code){
			return uni.$u.toast('请输入验证码')
		}
		if(!is_agree.value){
			return uni.$u.toast('请阅读《用户协议》和《隐私政策》')
		}
		const res = await mobile_login({
			mobile: form.mobile,
			code: form.code,
			pid: ''
		})
		userStore.user_info.token = res
		const user = await get_user()
		Object.assign(userStore.user_info,user.userinfo)
		appStore.redirectTo()
	}
	
	
	
	const wx_code = ref('')
	
	const wx_user = ref({})
	
	const wxLogin = async()=>{
		uni.showLoading({
			title:'加载中'
		})
		wx_code.value = await getWxCode()
		console.log(wx_code.value,'wx_code.value')
		await getOpenIdApi()
		uni.hideLoading()
	}
	const getWxUser = ()=>{
		uni.getUserProfile({
			desc: 'Wexin',
			success: async (userProfile) => {
				wx_user.value = userProfile
			}
		})
	}
	
	const getWxCode = async()=>{
		return new Promise((resolve,reject)=>{
			uni.login({
				provider: 'weixin',
				success:async function(loginRes) {
					console.log(loginRes, '微信授权参数');
					resolve(loginRes.code)
				},
				fail: (err) => {
					reject(err)
				}
			});
		})
	}
	
	const getPhoneNumber = async(e)=>{
		console.log(e,'手机号授权参数')
		console.log(wx_user.value,'用户信息参数')
		const {
			code,
			encryptedData,
			iv,
		} = e.detail
		
		// #ifdef MP-WEIXIN
		const res = await getPhone({
			code:code, //使用微信授权的code
			openId:open_id.value,
			// code, // 使用手机号授权的code
			encryptedData,
			iv,
		})
		uni.$u.toast('登录成功！')
		userStore.user_info = res
		appStore.redirectTo()
		// #endif
		
		
	}
	const getDictListApi = async()=>{
		const res = await getDictList({})
		if(res.length){
			const LocationRefresh = res.find(e=>{
				return e.dictKey == 'LocationRefresh'
			})
			if(LocationRefresh){
				appStore.LocationRefresh = Number(LocationRefresh.dictValue)*1000
			}
		}
	}
	
	const open_id = ref('')
	const session_key = ref('')
	const getOpenIdApi = async()=>{
		const res = await getOpenId({
			code:wx_code.value
		})
		open_id.value = res.openid
		session_key.value = res.sessionKey
		
		uni.$u.toast('登录成功！')
		userStore.user_info = res
		
		await getDictListApi()
		appStore.redirectTo()
		
	}
	
	const getLoginApi = async()=>{
		
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>